<template>
	<view class="message">
		<view class="head-top">
			<view class="message-title">
				通航信息
			</view>
		</view>
		<view class="content">
			<view class="weather-text"> {{detailInfo.date}} {{detailInfo.week}}</view>
			<view class="weather">
				<view class="top">
					<view class="top-left">
						<view class="number">{{detailInfo.weatherVo.airTemperature}}°C</view>
						<view class="text">
							<view class="txt">{{detailInfo.weatherVo.weatherInfo}}</view>
							<!-- <view class="txt">1</view> -->
						</view>
					</view>
				</view>
				<view class="list">
					<view class="item">
						<text>{{detailInfo.weatherVo.windDirection}}</text>
						<text>风向</text>
					</view>
					<view class="line"></view>
					<view class="item">
						<text>{{detailInfo.weatherVo.windSpeed}}m/s</text>
						<text>风速</text>
					</view>
					<view class="line"></view>
					<view class="item">
						<text>{{detailInfo.weatherVo.humidity}}%</text>
						<text>湿度</text>
					</view>
					<view class="line"></view>
					<view class="item">
						<text>{{detailInfo.weatherVo.visibility}}m</text>
						<text>能见度</text>
					</view>
				</view>
			</view>
			<view class="time">
				<view class="time-tit">
					通航时间
				</view>
				<view class="time-name">
					{{detailInfo.navigationVo.startTime}} -  {{detailInfo.navigationVo.endTime}}
				</view>
				<view class="time-tit">
					通航区域
				</view>
				<view class="time-name">
					{{detailInfo.navigationVo.navigationName}}
				</view>
				<view class="time-tit">
					在航船舶
				</view>
				<view class="time-list" v-if="detailInfo.runningShips && detailInfo.runningShips.length>0">
					<view class="time-item" v-for="(item,index) in detailInfo.runningShips" :key="index">
						<view class="img">
							<image src="../../static/image/WX20211119-150158@2x.png"></image>
						</view>
						<view class="name">{{item}}</view>
					</view>
					<!-- <view class="time-item">
						<view class="img">
							<image src="../../static/image/WX20211119-150158@2x.png"></image>
						</view>
						<view class="name">111</view>
					</view> -->
				</view>
			</view>
			<view class="tip">
				<image src="../../static/image/message.png"></image>
				<text>预计排队等待时间： {{detailInfo.waitMinutes}}分钟</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNavigation
	} from '@/api/public.js'
	export default {
		components: {

		},
		data() {
			return {
				detailInfo: ''
			}
		},
		onLoad() {
			this.getData()
		},

		created() {},
		onShow() {

		},
		onPullDownRefresh() {

		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				getNavigation().then(res => {

					const {
						data
					} = res
					this.detailInfo = data || ''

				}).finally(() => {
					uni.hideLoading()
				})
			}
		}

	}
</script>


<style scoped lang="scss">
	.message {
		padding-bottom: 40rpx;
		.head-top {
			background: url('@/static/image/bg.png') no-repeat center center;
			height: 396rpx;
			width: 100vw;
			background-size: 100% auto;

			.message-title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				padding-top: 100rpx;
			}
		}

		.content {
			width: 690rpx;
			margin: -176rpx auto 0 auto;

			.weather-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 20rpx;
				line-height: 33rpx;
				margin-top: 10rpx;
			}


			.weather {
				padding: 37rpx;
				background: #fff;
				box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(104, 104, 104, 0.1000);
				border-radius: 18rpx;
				margin-bottom: 30rpx;

				.top {
					display: flex;
					margin-bottom: 20rpx;
					align-items: center;

					.top-left {
						display: flex;
						align-items: center;

						.number {
							font-size: 80rpx;
							font-weight: bold;
							color: #08182E;
							margin-right: 20rpx;
						}

						.text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #606266;
						}

					}
				}

				.list {
					width: 100%;
					display: flex;
					margin: 20rpx 0;
					align-items: center;

					.item {
						width: calc(25% - 1rpx);
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #999999;
						 

						text {
							width: 100%;
							text-align: center;
						}

					}
					.line{
						width: 1rpx;
						height: 43rpx;
						background: rgba(0,0,0,0.3);
					}
				}
			}

			.time {
				padding: 37rpx;
				background: #fff;
				box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(104, 104, 104, 0.1000);
				border-radius: 18rpx;
				margin-bottom: 30rpx;

				.time-tit {
					font-size: 28rpx;
					font-weight: 400;
					color: #909399;
					margin-bottom: 14rpx;
				}

				.time-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #323232;
					margin-bottom: 50rpx;
				}

				.time-list {
					display: flex;
					flex-wrap: wrap;

					.time-item {
						width: 159rpx;
						height: 180rpx;
						background: #F5F7FA;
						border-radius: 18rpx;
						padding: 23rpx;
						box-sizing: border-box;
						margin-right: 38rpx;
						margin-bottom: 30rpx;


						.img {
							width: 112rpx;
							height: 61rpx;
							margin-bottom: 30rpx;
							text-align: center;

							image {
								width: 112rpx;
								height: 61rpx;
							}
						}

						.name {
							font-size: 28rpx;
							font-weight: 500;
							color: #323232;
							text-align: center;
						}
					}
				}

			}

			.tip {
				height: 68rpx;
				background: #F8EBEA;
				box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(104, 104, 104, 0.1000);
				border-radius: 18rpx;
				margin-bottom: 30rpx;
				padding: 0 37rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #E85A4A;
				display: flex;
				align-items: center;

				image {
					width: 22rpx;
					height: 24rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
